<template>
    <div class="container">
		<div class="cont">
			<div class="label">ID</div>
			<div>{{userInfo.user_id}}</div>
		</div>
		<div class="cont">
			<div class="label">账号</div>
			<div>{{userInfo.name}}</div>
		</div>
		<div class="cont">
			<div class="label">昵称</div>
			<el-input v-model="userInfo.nickname" maxlength="11" clearable/>
		</div>
		<div class="cont">
			<div class="label">生日</div>
			<el-date-picker v-model="userInfo.birthday" type="date" placeholder="选择日期" :default-value="new Date(2010, 9, 1)"/>
		</div>
		<div class="cont">
			<div class="label">性别</div>
			<el-select v-model="userInfo.sex" placeholder="Select">
				<!-- 未知=0  男=1  女=2 -->
				<el-option  value="未知"/> 
				<el-option  value="男"/>
				<el-option  value="女"/>
			</el-select>
		</div>
		<div class="cont cont2">
			<div class="label">头像</div>
			<el-upload action="" :show-file-list="false" :before-upload="uploadFace" :limit="1" accept="image/*">
				<img v-if="userInfo.face&&userInfo.face!=''" :src="userInfo?.face" class="avatar" />
				<!-- <img src="http://2001:da8:2012:4002:e5f2:fee5:4008:af15:7000/uploads/timg.jpg"  class="avatar"/> -->
				<!-- <view class="uploader" v-else><el-icons name="plus"/></view> -->
				<view class="uploader" v-else><el-icon><Plus /></el-icon></view>
			</el-upload>
		</div>
		<!-- <el-button @click="save" type="primary">保存</el-button> -->
		<el-button @click="save">保存</el-button>
	</div>
</template>


<script setup>
import { reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getPersonInfo,savePersonInfo } from '../../api/manager'
import { userStore } from '../../store/index'
import methods from '../../core/methods'
const uStore = userStore()

//用户信息
let userInfo = reactive({
    user_id:'',
    name:'',
    nickname:'',
    face:'',
    sex:'',
    birthday:''
})
watch(()=>userInfo.sex,(newV,oldV)=>{
	console.log('sex',newV,oldV)
})

//保存修改
const save = () =>{
	const uInfo = userInfo
    const data = {
        user_id:uInfo.user_id,
        username:uInfo.name,
        nickname:uInfo.nickname,
        face:uInfo.face,
        sex:uInfo.sex=='未知'?0:uInfo.sex=='男'?1:2,
        birthday:methods.changeTime(uInfo.birthday)
    }
	console.log('data',data)
    savePersonInfo(data).then(res => {
		if(res.code == 200){
			ElMessage.success(res.msg)
		}else{
			ElMessage.error(res.msg)
		}
	})
}

//上传头像
const uploadFace = (file) =>{
    methods.uploadImg(file)
    .then(res => {
        if(res.code == 200){
            userInfo.face = res.data.path
            ElMessage.success('上传成功')
        }else{
            ElMessage.error(res.msg)
        }
    })
    return false //加上这个，不用走到action的自动上传
}


const params = {
	user_id:localStorage.getItem('user_id')
}
    //获取用户信息
getPersonInfo(params).then(res =>{
	console.log('getPersonInfo',res)
	if(res.code == 200){
		userInfo.user_id=res.data.user_id
		userInfo.face=res.data.face
		userInfo.name=res.data.username
		userInfo.nickname=res.data.nickname
		userInfo.birthday=res.data.birthday
		userInfo.sex=res.data.sex==0?'未知':res.data.sex==1?'男':'女'
		uStore.setUserInfo(res.data)
	}else{
		ElMessage.error(res.msg)
	}
	console.log('userInfo',userInfo)
})


</script>

<style lang="less" scoped>
.container {
		background-color: #fff;
		padding: 0 20px 20px;
		box-sizing: border-box;
		.cont{
			display: flex;
			align-items: center;
			font-size: 15px;
			padding: 15px 0;
			.label{
				width: 60px;
				text-align: right;
				margin: 0 30px 0 0;
				font-weight: bold;
			}
			.el-input,.el-date-editor.el-input{
				width: 250px;
			}
			.uploader{
				width: 100px;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #d9d9d9;
				font-size: 20px;
			}
			.avatar{
				width: 100px;
				height: 100px;
			}
			&.cont2{
				align-items: flex-start;
			}
		}
		.el-button{
			margin: 0 0 0 50%;
			transform: translateX(-50%);
		}
	}
</style>